<template>
  <div class="vacation-box content-box">
    <nav-title v-if="edit" title="补卡申请" :routerLink="routerLink"/>
    <nav-title v-else="" title="补卡审批" :routerLink="routerLink"/>
    <div class="regulations-box" v-if="!edit">
      <div class="title">基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value" style="font-size: 14px;" >{{data.emplid}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value" style="font-size: 14px;" >{{data.nameDisplay}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value" style="font-size: 14px;" >{{data.rsFullName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value" style="font-size: 14px;" >{{data.jobcodeDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">职级</label>
          <span class="value" style="font-size: 14px;" >{{data.rsJobLevel}}</span>
        </p>
      </div>
    </div>
    <div class="regulations-box vacation-content">
      <div class="title">流程信息</div>
      <!-- <div class="information" v-if="edit">
        <div class="info-cell clearfix">
          <label class="label"><span class="red">*</span>补卡日期</label>
          <div class="value">
            <p>{{data.crdDate}}</p>
          </div>
        </div>
        <div class="info-cell clearfix">
          <label class="label"><span class="red">*</span>补卡原因</label>
          <div :class="edit ? 'value arrow' : 'value'">
            <group label-width="5em">
              <popup-radio placeholder="请选择" :readonly="!edit" :options="reasonList" v-model="data.crdReason"></popup-radio>
            </group>
          </div>
        </div>
        <div class="info-cell clearfix" :readonly="!edit">
          <label class="label"><span class="red">*</span>补卡时间</label>
          <div :class="edit ? 'value arrow' : 'value'">
            <group label-width="5em">
              <popup-radio placeholder="请选择" :readonly="!edit" :options="dayList" v-model="data.crdTime"></popup-radio>
            </group>
          </div>
        </div>
      </div> -->
      <div class="information" v-for="item in data.crdJson">
        <div class="info-cell clearfix">
          <label class="label"><span class="red">*</span>补卡日期</label>
          <div class="value">
            <p>{{item.crdDate}}</p>
          </div>
        </div>
        <div class="info-cell clearfix">
          <label class="label"><span class="red">*</span>补卡原因</label>
          <div :class="edit ? 'value arrow' : 'value'">
            <group label-width="5em">
              <popup-radio placeholder="请选择" :readonly="!edit" :options="reasonList" v-model="item.crdReason"></popup-radio>
            </group>
          </div>
        </div>
        <div class="info-cell clearfix" :readonly="!edit">
          <label class="label"><span class="red">*</span>补卡时间</label>
          <div :class="edit ? 'value arrow' : 'value'">
            <group label-width="5em">
              <popup-radio placeholder="请选择" :readonly="!edit" :options="dayList" v-model="item.crdTime"></popup-radio>
            </group>
          </div>
        </div>
      </div>
    </div>

    <div class="regulations-box">
      <div class="regulations-box">
        <div class="info-label">补卡事由</div>
        <div class="info-label-text">
          <textarea v-if="edit" placeholder="请在这里输入..." rows="5" v-model="data.crdComment"></textarea>
          <textarea v-else="" readonly rows="5" v-model="data.crdComment"></textarea>
        </div>
      </div>
    </div>
    <div class="regulations-box">
      <div class="regulations-box">
        <div class="info-label">附件</div>
        <div class="file-list" v-for="item in fileList">
          <div class="filname">
            <span class="iplodimg">
              <a v-if="(item.fileType == 'jpg') || (item.fileType == 'png') || (item.fileType == 'pdf') || (item.fileType=='txt') || (item.fileType=='jpeg')" href="javascript:;" @click="showItemClick(item)">{{item.originalName}}</a>
              <a v-else="" href="javascript:;" @click="openApp(item.fileUrl, item.androidUrl)">{{item.originalName}}</a>
              <img class="delicon" v-if="edit" @click="delImg(item.seqnbr)" src="../vacation/images/delfil.png" />
            </span>
          </div>
        </div>
        <div class="wrap-load" v-if="edit">
          <div class="upload-part">
            <img src="../vacation/images/addfils.png">
            <input @change="uploadFile" type="file" name="file" id="file" accept="image/*">
          </div>
        </div>
      </div>
    </div>

    <button v-if="resubmit" @click="submit">重新提交</button>
    <button v-else-if="edit" @click="submit">提交</button>

    <show-annex :option="showItem" v-if="showDetail" :hiddenImg="hiddenImg"></show-annex>

    <!-- 流程图 -->
    <div class="regulations-box" v-if="!edit">
      <div class="title">流程图</div>
      <v-flow-charts :transNum="cTransactionNbr" :loginOprid="loginOprid"></v-flow-charts>
    </div>

    <!-- 审批意见 -->
    <div class="regulations-box" v-if="approved == '0'">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
        <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
      </div>
    </div>

    <div style="height: 50px" v-if="!edit"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <div class="fix-btn">
        <button v-if="data.cApprovalSw == 'Y'" class="blue-btn" @click="doOperate('Approval')">同意</button>
        <button v-if="data.cAddSw == 'Y'" class="white-btn" @click="doOperate('AddStep')">
          <span>+</span> 加签</button>
        <span v-if="data.cPushbackAllSw == 'Y'" class="reject-main">
          <button class="yellow-btn" @click="popGroup">驳回</button>
          <transition name="slide-fade">
            <span v-if="showGroup" class="reject-group">
              <button class="yellow-btn" @click="doOperate('PushAllback')">重走</button>
              <button class="yellow-btn" @click="doOperate('Pushback')">不重走</button>
            </span>
          </transition>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { Datetime, Group, PopupRadio, dateFormat } from "vux";
import vFlowCharts from "../formalStaff/common/flowChart";
import { imgPreview, postImg } from "../../util/uploadImg";
import {
  getDicItem,
  saveWfCrd,
  getCrdInfo,
  getCompensateApprove
} from "../../api/api";
import moment from "moment";
// import cloneDeep from 'lodash/clonedeep';
import { publicUrl } from '../../util/http';
import qs from "qs";

export default {
  name: "SupplementaryCardDetail",
  components: {
    Datetime,
    Group,
    PopupRadio,
    vFlowCharts
  },
  created() {
    this.approved = this.$route.query.approved;
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.loginOprid = this.$route.query.token;
    // this.data.crdDate = this.$route.query.crdDate;
    if (this.$route.query.crdDate) {
      let arr = [];
      JSON.parse(this.$route.query.crdDate).map(item => {
        const obj = {
          crdDate: item,
          crdReason: "",
          crdTime: ""
        };
        arr.push(obj);
      });
      this.data.crdJson = arr;
    }

    if (this.$route.query.approved || this.$route.query.approved == 0) {
      this.edit = false;
    } else {
      if (this.$route.query.cTransactionNbr) {
        this.getData();
        this.resubmit = true;
      }
    }
    this.getType();
  },
  mounted() {},
  data() {
    return {
      showGroup: false,
      publicUrl: publicUrl,
      showItem: {},
      cTransactionNbr: "",
      routerLink: "",
      resubmit: false,
      showDetail: false,
      approved: "",
      edit: true,
      fileList: [],
      dayList: [],
      reasonList: [],
      // allInfo: {},
      cComments: "",
      data: {
        crdJson: [],
        crdComment: ""
      }
    };
  },
  methods: {
    getData() {
      this.$vux.loading.show();
      getCrdInfo({ cTransactionNbr: this.cTransactionNbr, loginOprid: this.loginOprid })
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.data = res.retData;
            // this.allInfo = res.retData;
            document.documentElement.scrollTop = 0;
            this.cWfType = res.retData.cWfType;
            this.fileList = res.retData.wfFiles;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    getType() {
      const Arr = [
        { type: "C_PATCH_REASON", data: "reasonList" },
        { type: "C_LEAVE_INTERVAL", data: "dayList" }
      ];
      Arr.map(item => {
        getDicItem({ fileName: item.type,loginOprid: this.loginOprid })
          .then(res => {
            if (
              res &&
              res.retCode === "000000" &&
              res.retData &&
              res.retData.length
            ) {
              const arr = [];
              res.retData.map(item => {
                const obj = {
                  value: item.xlatshortname,
                  key: item.fieldvalue
                };
                arr.push(obj);
              });
              this[item.data] = arr;
            } else {
              this.$vux.alert.show({
                title: "提示",
                content: res.retMsg
              });
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: "警告",
              content: "网络异常，请稍后重试"
            });
          });
      });
      if (!this.edit) this.getData();
    },
    submit() {
      let haveErr = false;
      this.data.crdJson.map(item => {
        if (!item.crdReason) {
          haveErr = true;
          return this.$vux.alert.show({
            title: "提示",
            content: "必须选择补卡原因！"
          });
        }
        if (!item.crdTime) {
          haveErr = true;
          return this.$vux.alert.show({
            title: "提示",
            content: "必须补卡时间！"
          });
        }
      });

      if (haveErr) return;
      let params = {
        crdJson: JSON.stringify(this.data.crdJson),
        crdComment: this.data.crdComment
      };
      if (this.cTransactionNbr) {
        params.cTransactionNbr = this.cTransactionNbr;
      }
      this.$vux.loading.show();
      saveWfCrd(qs.stringify(params))
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.$vux.alert.show({
              title: "提示",
              content: "申请成功",
              onHide: () => {
                this.fileList = [];
                this.approved = 2;
                this.routerLink = "MyApplication";
                this.cTransactionNbr = res.retData;
                this.edit = false;
                this.resubmit = false;
                this.getData();
              }
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    doOperate(actionType) {
      this.$vux.loading.show();
      if (actionType == "PushAllback" || actionType == "Pushback") {
        this.showGroup = !this.showGroup;
      }
      window.event.cancelBubble = true;
      //同意审批
      let params = {
        c_WF_TYPE: this.cWfType,
        c_TRANSACTION_NBR: this.cTransactionNbr,
        c_ACTION_TYPE: actionType,
        c_COMMENTS: this.cComments
      };

      if (actionType == "AddStep") {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: "Visa",
          params: {
            c_TRANSACTION_NBR: this.cTransactionNbr,
            c_WF_TYPE: this.cWfType,
            c_COMMENTS: this.cComments
          }
        });
      } else {
        this.$vux.confirm.show({
          title: "提示",
          content: "您确认要同意？",
          onConfirm: () => {
            getCompensateApprove(qs.stringify(params))
              .then(res => {
                this.$vux.loading.hide();
                if (res && res.retCode === "000000") {
                  let _this = this;
                  // this.$vux.alert.show({
                  //   title: "成功",
                  //   content: "操作成功",
                  //   onHide() {
                      _this.$router.push("/todoList/todo");
                  //   }
                  // });
                } else {
                  this.$vux.loading.hide();
                  this.$vux.alert.show({
                    title: "提示",
                    content: res.retMsg
                  });
                }
              })
              .catch(res => {
                this.$vux.alert.show({
                  title: "警告",
                  content: "网络异常，请稍后重试"
                });
              });
          }
        });
      }
    },
    popGroup() {
      this.showGroup = !this.showGroup;
      window.event.cancelBubble = true;
    },
    delImg(index) {
      delWfFile(
        qs.stringify({ cTransactionNbr: this.cTransactionNbr, seqnbr: index })
      )
        .then(res => {
          if (res.retCode === "000000") {
            const newList = [];
            this.fileList.map(item => {
              if (item.seqnbr != index) newList.push(item);
            });
            this.fileList = newList;
            this.$vux.alert.show({
              title: "提示",
              content: "删除成功"
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(e => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "提示",
            content: "上传失败"
          });
        });
    },
    showItemClick(item) {
      this.showItem = item;
      this.showDetail = true;
    },
    hiddenImg() {
      this.showDetail = false;
    },
    uploadFile(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.picValue = files[0];
      this.$vux.loading.show({
        text: "上传中"
      });
      imgPreview(this.picValue).then(imgRes => {
        postImg(imgRes, this.cTransactionNbr, this.cWfType, this.picValue.name)
          .then(res => {
            this.$vux.loading.hide();
            if (res.retCode === "000000") {
              this.cTransactionNbr = res.retData.cTransactionNbr;
              const obj = {
                originalName: this.picValue.name,
                fileUrl: imgRes,
                seqnbr: res.retData.seqnbr,
                fileType: this.picValue.name.split(".")[1]
              };
              this.fileList.push(obj);
              const file = document.getElementById("file");
              file.value = "";
              this.$vux.alert.show({
                title: "提示",
                content: "上传成功"
              });
            } else {
              this.$vux.alert.show({
                title: "提示",
                content: res.retMsg
              });
            }
          })
          .catch(e => {
            this.$vux.loading.hide();
            this.$vux.alert.show({
              title: "提示",
              content: "上传失败"
            });
          });
      });
    },
    openApp(url, androidUrl) {
      const u = navigator.userAgent;
      const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        webview.openAttachmentWebView(
          `${this.publicUrl}${androidUrl}`,
          this.$store.state.oprId,
          ""
        ); // eslint-disable-line
      } else {
        window.location.href = `myapp:${this.publicUrl}${url}`;
      }
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../vacation/vacation.scss";
.reject-main {
  position: relative;
  .reject-group {
    position: absolute;
    top: -80px;
    left: 0px;
    button {
      margin-bottom: 1px;
    }
  }
}
</style>
